<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      :width="props.width"
      :height="props.height"
      preserveAspectRatio="none meet"
      viewBox="0 0 278.765 48"
    >
      <g id="文字装饰2" transform="translate(-911.617 -784)">
        <path
          id="路径_1206"
          data-name="路径 1206"
          d="M20,0H220l20,24.214L220,48H20L0,24Z"
          transform="translate(931 784)"
          :fill="states.color"
          opacity="0.2"
        />
        <path
          id="路径_1206_-_轮廓"
          data-name="路径 1206 - 轮廓"
          d="M20.937,2,2.6,24,20.937,46H219.069L237.4,24.2,219.058,2H20.937M20,0H220l20,24.214L220,48H20L0,24Z"
          transform="translate(931 784)"
          :fill="states.color"
        />
        <path
          id="路径_1207"
          data-name="路径 1207"
          d="M20.937,2,2.6,24,20.937,46h4.237V2H20.937M20,0h5.174V48H20L0,24Z"
          transform="translate(916.742 784)"
          :fill="states.color"
          opacity="0.6"
        />
        <path
          id="路径_1207-2"
          data-name="路径 1207"
          d="M4.237,2,22.57,24,4.237,46H0V2H4.237m.937-2H0V48H5.174l20-24Z"
          transform="translate(1160.084 784)"
          :fill="states.color"
          opacity="0.6"
        />
        <path
          id="路径_1207-3"
          data-name="路径 1207"
          d="M12.824,1.225,1.595,14.7,12.824,28.175h4.888V1.225H12.824M12.25,0h5.462V29.4H12.25L0,14.7Z"
          transform="translate(911.617 793.301)"
          :fill="states.color"
          opacity="0.4"
        />
        <path
          id="路径_1207-4"
          data-name="路径 1207"
          d="M4.888,1.225,16.117,14.7,4.888,28.175H0V1.225H4.888M5.462,0H0V29.4H5.462l12.25-14.7Z"
          transform="translate(1172.671 793.301)"
          :fill="states.color"
          opacity="0.4"
        />
      </g>

      <text
        :x="states.x"
        :y="states.y"
        font-family="font"
        :font-size="states.fontSize"
        :fill="states.fontColor"
        style="text-anchor: middle"
      >
        {{ states.text }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
onMounted(() => {
  states.value.x = "50%";
  states.value.y = "59%";
});
</script>

<style scoped lang="scss"></style>
